<template>
  <div class="Voucher">
    <div class="head" v-if="items.coupon_list.length>0">
    <!--<div class="head" v-if="false">-->
      <ul>
        <li v-for="a in items.coupon_list">
          <div class="">
            <p>补学券</p>
            <p>共有 <span>{{a.total}}</span> 张</p>
          </div>
          <div class="">
            <p @click="goread">立即使用<i class="iconfont icon-jinru"></i></p>
          </div>
        </li>
      </ul>
    </div>
    <div class="null" v-if="items.coupon_list.length===0">
    <!--<div class="null">-->
      <i class="iconfont icon-qiajuan"></i>
      <p>你还没有可使用的补学券哦～</p>
    </div>
    <div class="text">
      <div class="title">
        <i></i>补学券说明<i></i>
      </div>
      <ul>
        <li v-for=" a in items.faq">{{a}}</li>
      </ul>
    </div>
    <TextPopup :options="PopupConfig" v-if="Popup" @hide="hidepopup" @ok="ok()" @call="call()"
               @fall="call()">
    </TextPopup>
    <transition
      name="bounceshade">
      <div class="shade" v-show="shade" @click="hideall"></div>
    </transition>
    <transition
      name="bouncePopup">
      <VoucherPopup v-if="palystate" :play="play" @sbmit="sbmit" @hide="hide"></VoucherPopup>
    </transition>
    <div class="Vipfooter">
      <div class="btn">
        <btn :obj='btnstyle' :text="textbtn" @statr="post_coupon({})"></btn>
      </div>
    </div>
  </div>
</template>

<script>
  import btn from '../../components/btn/index'
  import {Indicator, Toast} from 'mint-ui'
  import TextPopup from '../../components/TextPopup/index'
  import VoucherPopup from '../../components/VoucherPopup/index'

  export default {
    name: "index",
    data: function () {
      return {
        btnstyle: {
          backgroundColor: '#ffd000',
          width: '80%',
          color: '#66440a',
          opacity: 1
        },
        textbtn: '兑换补学券',
        items: {
          coupon_list: []
        },
        Popup: false,
        num: 0,
        play: [],
        PopupConfig: {
          btnStyle: {
            width: '70%',
            height: '4rem',
            background: '#ffd000',
            borderRadius: '4rem',
            color: '#66440a',
            fontSize: '1.8rem',
            boxShadow: '0 10px 24px 0 rgba(255, 208, 0, 0.4)'
          },
          btnText: '邀请好友',
          btnClick: 'fall',
          title: '温馨提示',
          content: '钱包余额不足，你可以直接通过“邀请好友”获得补卡券，立即去邀请你的好友加入吧！',
          textStyle: {
            lineHeight: '2rem',
            fontSize: '1.5rem',
            color: '#999'
          },
          Dis: false,
          icon: true,
          btnnum: 1,
          btns: [
            {
              btnstyle: {
                width: '40%',
                height: '4.5rem',
                background: '#fff',
                border: 'solid 2px #cccccc',
                borderRadius: '5rem',
                color: '#333',
                fontSize: '1.8rem'
              },
              btntext: '查看钱包',
              dis: false,
              btnclick: 'ok'
            },
            {
              btnstyle: {
                width: '40%',
                height: '4.5rem',
                background: '#ffd000',
                borderRadius: '5rem',
                color: '#66440a',
                fontSize: '1.8rem',
                boxShadow: '0 10px 24px 0 rgba(255, 208, 0, 0.4)'
              },
              btntext: '邀请好友',
              dis: false,
              btnclick: 'call'
            },
          ]
        },
        palystate: false,
        shade:false
      }
    },
    mounted: function () {
      this.updata({page_index: 1})
    },
    methods: {
      updata: function (data) {
        this.$axios.get_coupon(data).then(res => {
          this.items = res.data.qing_data
          this.coupon_price({coupon_id: res.data.qing_data.primary_coupon_id})
        })
      },
      hide: function () {
        this.palystate = false
        this.shade = false
      },
      hideall:function(){
        this.palystate = false
        this.shade = false
      },
      coupon_price: function (data) {
        this.$axios.coupon_price(data).then(res => {
          this.play = res.data.qing_data
        })
      },
      post_coupon: function (data) {
        // console.log(data)
        this.palystate = true
        this.shade = true
      },
      sbmit: function (data) {
        data = JSON.parse(JSON.stringify(data));
        if (data.pay_mode_id === 2 && data.balance < data.coupon_actual_price) {
          this.palystate = false
          this.shade = false
          this.Popup = true
          return false
        }
        data.coupon_id = this.items.primary_coupon_id
        this.$axios.post_coupon(data).then(res => {
          this.palystate = false
          this.shade = false
          if (data.pay_mode_id === 2) {
            if (res.data.qing_code === 100) {
              Toast({
                message: '兑换成功',
                iconClass: 'iconfont icon-tianjiachenggong',
                duration: 3000
              })
              this.updata({page_index: 1})
            } else {
              Toast({
                message: '兑换失败',
                iconClass: 'iconfont icon-bangdingshibai',
                duration: 3000
              })
            }
          } else {
            var _this = this
            var str = {
              order_id: res.data.qing_data.wx_pay_info.order_id,
              order_no: res.data.qing_data.wx_pay_info.order_id,
              order_type: res.data.qing_data.wx_pay_info.order_type,
              pay_mode_id: res.data.qing_data.wx_pay_info.pay_mode_id
            }
            var obj = {
              timeStamp: res.data.qing_data.wx_pay_info.pay_parameters.timeStamp,
              appId: res.data.qing_data.wx_pay_info.pay_parameters.appId,
              nonceStr: res.data.qing_data.wx_pay_info.pay_parameters.nonceStr,
              package: res.data.qing_data.wx_pay_info.pay_parameters.pkg,
              paySign: res.data.qing_data.wx_pay_info.pay_parameters.paySign,
              pkg: res.data.qing_data.wx_pay_info.pay_parameters.pkg,
              signType: res.data.qing_data.wx_pay_info.pay_parameters.signType,
            }
            this.$wx.WXPay(obj, res => {
              _this.num = 0
              if (res === 'get_brand_wcpay_request:ok') {
                Indicator.open({
                  text: '正在查询支付结果',
                  spinnerType: 'fading-circle'
                })
                setTimeout(() => {
                  _this.payment_status(str)
                }, 500)
              } else if (res === 'get_brand_wcpay_request:cancel') {
                // _this.payState = true
                Toast({
                  message: '支付失败',
                  iconClass: 'iconfont icon-bangdingshibai',
                  duration: 3000
                })
              } else if (res === 'get_brand_wcpay_request:fail') {
                // _this.payState = true
                Toast({
                  message: '支付失败',
                  iconClass: 'iconfont icon-bangdingshibai',
                  duration: 3000
                })
              }
            })
          }
        })
      },
      goread: function () {
        sessionStorage.setItem('Home', 'read')
        this.$router.push({
          name: 'Home',
          query: {}
        })
      },
      go: function (name, obj) {
        this.$router.push({
          name: name,
          query: obj || {}
        })
      },
      payment_status: function (data) {
        this.$axios.check_status(data).then(res => {
          this.num = 0
          Indicator.close()
          if (res.data.qing_code === 100) {
            Toast({
              message: '支付成功',
              iconClass: 'iconfont icon-tianjiachenggong',
              duration: 3000
            })
            this.updata({page_index: 1})
          } else {
            Toast({
              message: '支付失败',
              iconClass: 'iconfont icon-bangdingshibai',
              duration: 3000
            })
          }
        })
      },
      hidepopup: function () {
        this.Popup = false
      },
      ok: function () {
        this.go('wallet')
        this.hidepopup()
      },
      call: function () {
        this.go('NewPromotion')
        this.hidepopup()
      }
    },
    components: {btn, VoucherPopup, TextPopup},
  }
</script>

<style scoped>
  @import "../../assets/css/views/Voucher/index.css";
</style>
